---
description: Компонент для создания интерактивных карточек с изображением и текстовым содержимым.
---

<Overview group="data-display">

# ContentCard [tag:component]

Компонент для создания интерактивных карточек с изображением и текстовым содержимым.
Сочетает возможности кликабельных элементов, карточек и медиа-контента.
Автоматически распределяет свойства между вложенными компонентами.

Связанные компоненты:

- [CardGrid](/components/card-grid)
- [CardScroll](/components/card-scroll)

</Overview>

<Playground>
  ```jsx
  <ContentCard
    onClick={() => {}}
    src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
    alt="Picture of brown and gray mountains under blue sky during daytime photo"
    overTitle="unsplash"
    title="brown and gray mountains under blue sky during daytime photo"
    description="Mountain changji"
    caption="Photo by Siyuan on Unsplash"
    maxHeight={100}
  />
  ```
</Playground>

## Распределение свойств

### Свойства изображения

Внутренний тэг `img` получает следующие свойства: `getRef`, `maxHeight`, `imageObjectFit`, `src`, `srcSet`, `alt`,
`width`, `height`, `crossOrigin`, `decoding`, `loading`, `referrerPolicy`, `sizes`, `useMap`, `fetchPriority`

### Свойства корневого компонента `Card`

Внутренний компонент [`Card`](/components/card) получает следующие свойства: `mode`, `getRootRef`, `Component`,
`style`, `className`.

### Свойства `Tappable`

Внутренний компонент [`Tappable`](/components/tappable) получает все остальные свойства (кроме `subhead`,
`header`, `text` и `caption`).

## Семантическая настройка

- **Component** — базовый HTML-тег контейнера (по умолчанию `li`).
- **titleComponent** — тег для обёртки заголовка (по умолчанию `span`).

## Доступность (a11y) [#a11y]

1. По умолчанию используется тег `"li"` для повышения доступности компонента. Вы можете прокинуть необходимый вам тег через prop `Component`.
   Ссылки на источники: [статья про доступность карточек](https://inclusive-components.design/cards/).
2. Всегда указывайте осмысленный `alt`:

   ```jsx
   // Плохо
   <ContentCard src="/product.jpg" alt="Изображение" />

   // Хорошо
   <ContentCard src="/product.jpg" alt="Красный свитер с оленями" />
   ```

3. Используйте семантические теги для заголовков:
   ```jsx
   <ContentCard titleComponent="h3" title="Новости платформы" titleLevel="2" />
   ```

## Свойства и методы [#api]

<PropsTable name="ContentCard" />
